<template>
    <div class="xtx-goods-page">
        <div class="container" v-if="goods.goodsInfo.name">
            <!-- 面包屑区域 -->
            <el-breadcrumb separator=">" style="height:50px;line-height:50px;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/category/${goods.goodsInfo.categories[1].id}` }">{{
                        goods.goodsInfo.categories[1].name
                }}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/category/sub/${goods.goodsInfo.categories[0].id}` }">{{
                        goods.goodsInfo.categories[0].name
                }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ goods.goodsInfo.name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 商品信息 -->
            <div class="goods-info">
                <div class="media">
                    <GoodsImage :images="goods.goodsInfo.mainPictures"></GoodsImage>
                </div>
                <div class="spec"></div>
            </div>
            <!-- 商品详情 -->
            <div class="goods-footer">
                <div class="goods-article">
                    <!-- 商品+评价 -->
                    <div class="goods-tabs"></div>
                </div>
                <!-- 24热榜+专题推荐 -->
                <div class="goods-aside"></div>
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup name="GoodsInfo">
import { watch } from 'vue'
import { useRoute } from 'vue-router'
import useStore from '@/store'
import GoodsImage from './components/goods-image.vue';
const route = useRoute()
const { goods } = useStore()
watch(
    () => route.params.id,
    () => {
        // 代表现在访问的是详情页面
        if (route.fullPath === `/goods/${route.params.id}`) {
            goods.getGoodsInfo(route.params.id as string)
        }
    },
    { immediate: true }
)
</script>
  